<template>
	<div>
		    <el-card>
			      <template #header>
				        <el-button v-print="print" type="success"
					>点击打印</el-button
				>
				      </template
			>
			      
			<!-- <div id="printData">
				        <el-table border :data="tableData" style="width: 100%">
					          <el-table-column
						prop="date"
						label="Date"
						width="180"
					/>
					          <el-table-column
						prop="name"
						label="Name"
						width="180"
					/>
					          <el-table-column
						prop="address"
						width="180"
						label="Address"
					/>
					        </el-table
				>
				      
			</div> -->
			    </el-card
		>
		<el-divider></el-divider>
		<div id="printData">
			  
			<table class="printTable" border="1">
				    
				<thead>
					      
					<tr>
						        
						<th>姓名</th>
						        
						<th>生日</th>
						        
						<th>地址</th>
						      
					</tr>
					    
				</thead>
				    
				<tbody>
					      
					<tr>
						        
						<td>张三</td>
						        
						<td>1998-02-25</td>
						        
						<td>河北避暑山庄</td>
						      
					</tr>
					      
					<tr>
						        
						<td>李四</td>
						        
						<td>1996-02-24</td>
						        
						<td>北京大兴</td>
						      
					</tr>
					      
					<tr>
						        
						<td>王五</td>
						        
						<td>1997-02-26</td>
						        
						<td>浙江杭州</td>
						      
					</tr>
					    
				</tbody>
				  
			</table>
		</div>
	</div>
</template>

<script setup lang="ts">
const tableData = [
	{
		date: "2024-05-03",
		name: "知否君",
		address: "中国北京",
	},
	{
		date: "2024-05-02",
		name: "工藤新一",
		address: "中国上海",
	},
]
// 打印
const print = {
	id: "printData",
	popTitle: "打印数据",
}
</script>

<style lang="scss" scoped>
@page {
  size: auto;
  margin-bottom: 5mm;
}
.printTable {
  color: #616161;
  width: 100%;
  border-collapse: collapse;
  border: 0.25px solid #ededed;
  text-align: left;
  font-size: 15px;
  th,
  td {
    padding: 6px;
  }
}
</style>
